<template>
    <div id="login">
        <div class="title">
            <h2>测试</h2>
        </div>
        <div class="login-content clearfix">
            <div class="form">
                <div class="form-title color-orange">账户登录</div>
                <div class="m-t-lg">
                    <el-input placeholder="输入账户名称" v-model="param.userName"></el-input>
                </div>
                <div class="m-t-lg">
                    <el-input type="password" placeholder="输入密码" @keyup.enter.native="login" v-model="param.password"></el-input>
                </div>
                <div>
                    <button class="btn btn-danger btn-login"  @click="login()">登录</button>
                </div>
                <!--<div class="m-t">
                    <div class="pull-left">忘记密码？</div>
                    <div class="pull-meter color-orange">注册</div>
                </div>-->
            </div>
        </div>
    </div>
</template>

<script>
    import CryptoJS from "crypto-js";
    import { setCookie, delCookie } from "@/assets/js/cookie";
    import { setSessionStorage } from "@/assets/js/sessionStorage";
    import { Login } from "@/assets/js/api";

    export default {
        name: "login",
        data() {
            return {
                param: {
                    userName: "",
                    password: ""
                }
            };
        },
        mounted() {},
        methods: {
            login() {
                delCookie("hjLoginToken");
                let params = new FormData()
                params.append('username',this.param.userName+',batfront')
                params.append('password', this.param.password)
                params.append('grant_type','password')
                params.append('client_id','batfront')
                params.append('client_secret','123456')
                Login.login(params).then(response => {
                    console.log(response)
                    if (response.data) {
                        let params2 = {
                            userName:this.param.userName,
                            clientId:"batfront"
                        }
                        let respons = response.data

                        setCookie("hjLoginToken", respons.access_token, 1);
                        Login.userId(params2).then(response =>{
                            if(response.data){
                                setSessionStorage("userInfo", response.data, 1);
                                setCookie("operatorId", response.data.id, 1);
                                setCookie("userName", response.data.userName, 1);
                                setCookie("roleId", response.data.roleId, 1);
                                this.$router.push({ path: "/home" ,query:{roleId:response.data.roleId}});
                            }
                        })

                    }
                });
            }
        }
    };
</script>

<style>
    #login {
        height: 100vh;
    }
    #login .title h2 {
        height: 50px;
        background-image: linear-gradient(270deg, #f9ac64 0%, #fe5d3c 100%);
        margin-top: 0;
        margin-bottom: 0;
        line-height: 50px;
        padding-left: 133px;
        color: #ffffff;
    }
    .login-content {
        background: url("../assets/img/login.png");
        background-size: 100%;
        height: calc(100% - 50px);
    }
    .login-content .form {
        padding: 0 29px;
        width: 380px;
        height: 372px;
        background-color: #ffffff;
        box-shadow: 0px 3px 6px 0px #d6bdab;
        border-radius: 3px;
        margin-top: 148px;
        margin-right: 132px;
        float: right;
    }

    .login-content .form-title {
        margin-top: 20px;
        text-align: center;
        font-size: 18px;
    }

    .login-content input {
        height: 40px;
    }

    .login-content .btn-login {
        margin-top: 42px;
        width: 100%;
        font-size: 18px;
    }
</style>